import React, { Component } from 'react';
import { NavBar, Swiper, Toast } from 'antd-mobile'
import { StarOutline, FillinOutline, FolderOutline } from 'antd-mobile-icons'
import { goods_detil, goods_add, colloct_add, colloct_cont, colloct_list } from '../../utils/api';
import { coloct_add, coloct_count } from '../../Store/collect/contanter';
import { connect } from 'react-redux';

class GoodsDilter extends Component {
  state = {
    goodslisttab: {},
    num: 0
  }
  handleBack() {
    this.props.history.go(-1)
  }
  componentDidMount() {
    console.log(this.props);
    // 加载完成获取商品详情
    goods_detil({ params: { goodid: this.props.match.params.id } }).then(res => {
      console.log(256, res.data.goodinfo);
      this.setState({
        goodslisttab: res.data.goodinfo
      }, () => {
        // 获取商品收藏列表判断有无在
        colloct_list({ params: { userid: localStorage.getItem("userid") } }).then(res => {
          let index = res.data.list.find(item => {
            return item.id === this.state.goodslisttab.id
          })
          if (index) {
            this.setState({
              num: 1
            })
            this.props.coloct_add_list({ type: "CLLOOCT", params: this.state.goodslisttab })
          }
        })
      })
    })
  }

  // 加入购物车
  addgoodscar = () => {
    goods_add({ userid: localStorage.getItem("userid"), goodid: this.state.goodslisttab.id }).then(res => {
      console.log(res);
      Toast.show({
        icon: 'success',
        content: '加入成功',
      })
    })
  }
  // 收藏
  colooct = () => {
    if (this.state.num === 0) {
      this.props.coloct_add_list({ type: "CLLOOCT", params: this.state.goodslisttab })
      colloct_add({ userid: localStorage.getItem("userid"), goodid: this.state.goodslisttab.id }).then(res => {
        if (res.data.code === 200) {
          Toast.show({
            icon: 'success',
            content: '收藏成功',
          })
          this.setState({
            num: 1
          })
        }
      })
    } else {
      this.props.coloct_count_list({ type: "CANCElCLLOOCT", params: this.state.goodslisttab })
      // Store.dispatch({ type: "CANCElCLLOOCT", params: this.state.goodslisttab })
      colloct_cont({ userid: localStorage.getItem("userid"), goodid: this.state.goodslisttab.id }).then(res => {
        if (res.data.code === 200) {
          Toast.show({
            icon: 'success',
            content: '取消收藏',
          })
          this.setState({
            num: 0
          })
        }
      })
    }
  }
  render() {
    console.log(this.props);
    return (
      <div className='product'>
        <NavBar onBack={() => { this.handleBack() }}>
          商品详情
        </NavBar>
        <div className='productpic'>
          <Swiper autoplay loop>{this.state.goodslisttab.pics && this.state.goodslisttab.pics.map((item, index) => {
            return (
              <Swiper.Item key={index}>
                <img src={item} alt="" />
              </Swiper.Item>
            )
          })}</Swiper>
        </div>
        <div className='price'>
          <span>原价￥{this.state.goodslisttab.salesPrice && this.state.goodslisttab.salesPrice.value}</span>
          <span>活动价￥215</span>
        </div>
        <div className='introduce'>
          <span>包邮包税</span>
          <div className='name'>{this.state.goodslisttab.name}</div>
          <div className='engname'>cOSME DECORTE Phytotune Hydro Tuner 200ml</div>
        </div>
        <div className='footer'>
          <div className='left'>
            <div className='block' onClick={() => { this.colooct() }}>
              <span><StarOutline /></span>
              <span className='small'>
                {
                  this.props.reducer_collect.find(item => {
                    return item.id === this.state.goodslisttab.id
                  }) ? "已收藏" : "收藏"
                }

              </span>
            </div>
            <div className='block'>
              <span><FillinOutline /></span>
              <span className='small'>分享</span>
            </div>
            <div className='block'>
              <span><FolderOutline /></span>
              <span className='small'>购物车</span>
            </div>
          </div>
          <div className='right'>
            <button className='orange' onClick={this.addgoodscar}>加入购物车</button>
            <button className='red'>立即购买</button>
          </div>
        </div>
      </div>
    );
  }
}

export default connect(
  (state) => {
    return {
      reducer_collect: state.reducer_collect.goodslist
    }
  },
  {
    coloct_add_list: coloct_add,
    coloct_count_list: coloct_count,
  }
)(GoodsDilter);